<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>值班日历</title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<!--日历-->
		<link rel="stylesheet" href="../../js/plugins/fullcalendar/fullcalendar.min.css" />
		<link rel="stylesheet" href="../../js/plugins/fullcalendar/fullcalendar.print.min.css" />
		<style>
			html,body,.layui-card{height: 100%;}
			.layui-card{margin-bottom:0}
			.layui-card-body{height: calc(100% - 45px);}
			.fc button, .fc-button-group, .fc-time-grid .fc-event .fc-time span{display: inline-block;}
			#layer-content{display: none;}
			.save-btns{border-top: 1px solid #ccc;}
			#saveBtn,#cancelBtn{float: right;}
			#layer-content .layui-row{padding: 10px;}
			.layui-card-header span{color: #949494;}
		</style>
	</head>
	<body>
		<div class="layui-card">
			<div class="layui-card-header layui-row">
				<div class="layui-col-sm3"><label>计划名称：</label><span>网络组三班倒</span></div>
				<div class="layui-col-sm3"><label>值班开始时间：</label><span>8：00</span></div>
				<div class="layui-col-sm3"><label>结束时间：</label><span>8：00</span></div>
				<div class="layui-col-sm3"><label>值班部门：</label><span>网络组</span></div>
			</div>
			<div class="layui-card-body"><div id="calendar"></div></div>
		</div>
		<div class="layui-form" id="layer-content">
			<div class="layui-row">
				<label class="layui-form-label">值班人员：</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" class="layui-input" name="users"/>
				</div>
			</div>
			<div class="layui-row">
				<label class="layui-form-label">值班时间：</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" class="layui-input" id="date-time"/>
				</div>
			</div>
			<div class="layui-row save-btns">
				<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn">删除</a>
				<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" id="cancelBtn">取消</a>
				<a href="javascript:;" class="layui-btn layui-btn-sm" id="saveBtn">保存</a>
				
			</div>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<!--日历-->
		<script src="../../js/plugins/fullcalendar/moment.min.js"></script>
		<script src="../../js/plugins/fullcalendar/fullcalendar.min.js"></script>
		<script src="../../js/plugins/fullcalendar/zh-cn.js"></script>
		<script>
			let eventList = [
					{
					  title: '张强、李艾',
					  start: '2019-05-13T08:00:00',
					  end: '2019-05-14T08:00:00'
					},
					{
					  title: '刘猛、段飞',
					  start: '2019-05-14T08:00:00',
					  end: '2019-05-15T08:00:00'
					},
					{
					  title: '王思、郝林',
					  start: '2019-05-15T08:00:00',
					  end: '2019-05-16T08:00:00'
					}
				  ];
			$(function(){
				layui.use(['layer','form','laydate'],function(){
					var layer = layui.layer,form = layui.form,laydate = layui.laydate;
					$('#calendar').fullCalendar({
					  //日历头部
						header: {
							left: 'prev,next today',
							center: 'title',
							right: 'month,agendaWeek,agendaDay'
						  },
						  navLinks: true, // 天/周名称是否可点击,默认false
						  selectHelper: true,//拖拽事件时绘制占位符,仅周视图有效
						  eventLimit: true, // 限制显示在一天的事件数-true:事件数限制为单元格高度,超出的选更多显示
						  events: eventList,
						  eventClick:function(calEvent,jsEvent,view){
							  let {title,id,start,end} = calEvent;
							  var layContent =  $('#layer-content');
							  $(layContent).find('input[name="users"]').val(title);
							  var time = start._i.replace('T',' ')+' ~ '+end._i.replace('T',' ');
							  laydate.render({
							  	elem:'#date-time',
							  	type:'datetime',
							  	range:'~',
							  	value:time
							  })
							  layer.open({
								type:1,
								title:'编辑事件',
								content:$(layContent),
								area:['500px','300px']
							  })
						  }
						  
					});
				})
				
				
			})
		</script>
	</body>
</html>
